﻿<!DOCTYPE html>
<html>a
<head>
<meta charset="UTF-8">
  <script type="text/javascript">
  window.onload=function(){
    var odiv = document.getElementsByTagName('td');
    var oinput = document.getElementsByTagName('input');
     var arr=[];
     for(var i=0;i<odiv.length;i++) 
      {arr.push([getStyle(odiv[i],'left'),getStyle(odiv[i],'top')]);};
   oinput[0].onclick=function(){
      arr.push(arr[0]);
      arr.shift();
      for(var i=0;i<odiv.length;i++)
           {odiv[i].style.left= arr[i][0];
            odiv[i].style.top= arr[i][1];
   }
}
 
 oinput[1].onclick=function(){
      arr.unshift(arr[odiv.length-1]);
      arr.pop();
      for(var i=0;i<odiv.length;i++)
           {odiv[i].style.left= arr[i][0];
            odiv[i].style.top= arr[i][1];
   }
}


function getStyle(obj, attr) //获取CSS样式信息
{ 
if(obj.currentStyle) 
{ 
return obj.currentStyle[attr]; 
} 
else 
{ 
return getComputedStyle(obj,false)[attr]; 
} 
}    
}
  </script>
  <style type="text/css">
  .same{
  	height:100px;width:100px;background-color:blue;position:absolute;
  }
  img:hover{transform:scale(1.5);}
  span{color:red;}
  h3{display:inline;}
  </style>
</head>
<body>
<div style="border:2px solid red; height:650px; width:192px; ">
	<div><img src="ztsc.png"><h3>主题市场</h3>
	<p>女装 男装 鞋靴 箱包 <span > ></span></p>
	<p>婴童 美妆 食品 珠宝 <span > ></span></p>	
    <p>装修 建材 家居 百货 <span ></span></p>
    <p>汽车 数码 家电 游戏 <span > ></span></p>
    <p>生活 学习 房产 游戏 <span > ></span></p>
    <p>运动 户外 娱乐 花鸟 <span > ></span></p>
	</div>
    <div><img src="tsgw.png"><h3>特色购物</h3>
    <p>淘宝女人 淘宝男人 中老年 </p>
    <p>闲鱼 拍卖会 全球购</p>
    <p>批发量贩 淘宝众筹 爱逛街</p>
    <p>中国制造 淘女郎 企业购</p>
    </div>
    <div><img src="yhcx.png"><h3>优惠促销</h3>
    <p>天天特价 试用 清仓</p>
    <p>一元起拍 淘金币 抢新</p>
    <p>淘特莱斯 本地团 农场</p>
    </div>
    <div>
     <p style="border-top:1px #ccc solid">阿里旺旺 支付宝 盯盯</p>
    </div> 
<div style="position:absolute;top:440px;left:450px;"><input type="button" id="box1" value="<-切换">
<input type="button" id="box2" value="切换->"></div>
<div  id="roll" style="height:400px;width:600px;position:absolute;overflow:hidden;top:5px;left:215px;border:1px red solid;">
<div id="roll1">
<table>
<tr>
<td  class="same" style="top:0px;left:100px;"><img src="pattern-1.jpeg"></td>
<td  class="same"style="top:0px;left:705px;"><img src="pattern-2.jpeg"></td>
<td  class="same"style="top:0px;left:1312px;"><img src="pattern-3.jpeg"></td>
<td  class="same"style="top:0px;left:1925px;"><img src="pattern-4.jpg"></td>
<td  class="same"style="top:0px;left:2530px;"><img src="pattern-5.jpg"></td>
</tr>
</table>
</div>
<div id="roll2"></div>
</div>
<script>
 
var roll2=document.getElementById("roll2");
 
var roll1=document.getElementById("roll1");
 
var roll=document.getElementById("roll");
 
roll2.innerHTML=roll1.innerHTML; 
 
function Marquee1(){
  
if(roll2.offsetWidth-roll.scrollleft<=0){
 
 roll.scrollLeft-=roll1.offsetWidth; 
 
 }else{
 
 roll.scrollLeft++;
} 
} 
var MyMar1=setInterval(Marquee1,30);
 
roll.onmouseover=function qq() {clearInterval(MyMar1);}
 
roll.onmouseout=function(){MyMar1=setInterval(Marquee1,30);
  }
 
</script>
</body>
</html>